import React, { PureComponent } from 'react'
import styled, { ThemeProvider } from 'styled-components'

import Home from '../home'
import Profile from '../profile'

const HYButton = styled.button`
  padding: 10px 20px;
  border-color: yellow;
  color: red;
`

// const HyPrimaryButton = styled.button`
//   padding: 10px 20px;
//   color: #fff;
//   background-color: green;
// `

const HyPrimaryButton = styled(HYButton)`
  color: #fff;
  background-color: green;
`

export default class App extends PureComponent {
  render() {
    return (
      <ThemeProvider theme={{themeColor: 'blue', fontSize: '30px'}}>
        App
        <Home/>
        <hr/>
        <Profile/>
        <hr/>
        <HYButton>Button</HYButton>
        <HyPrimaryButton>PrimaryButton</HyPrimaryButton>
      </ThemeProvider>
    )
  }
}